<!--  -->
<template>
  <div class="home">
    <div class="container">
      <div class="top-title-content">
        <div class="top-icon-content">
          <img class="top-icon" src="~assets/img/viewBox/title_1.png" alt="" />
        </div>
      </div>
      <div class="top-container">
        <div class="left-box">
          <div class="left-box-title">
            <img src="~assets/img/viewBox/title_01.png" alt="" />
          </div>
          <div class="order-count">
            <span class="count">891</span>
            <span class="unit">单</span>
          </div>
          <div id="main" class="top-left-chart"></div>
          <div class="querry-icon">
            <img
              src="~assets/img/viewBox/ico_about.png"
              width="1rem"
              height="1rem"
              alt=""
            />
          </div>
        </div>
        <div class="right-box">
          <div class="right-top-box">
            <div class="right-box-title">
              <div class="right-box-tab"></div>
              <img class="right-box-title-img" src="~assets/img/viewBox/title_02.png" />
            </div>
            <div class="order-count yellow">
              <span class="count">891</span>
              <span class="unit">万</span>
            </div>
            <div class="top-rigth-chart" id="GaugeRing"></div>
          </div>
          <div class="right-top-bottom-box">
            <div class="r-t-b-left-box">
              <div class="tilte-compare-percent">
                <img src="~assets/img/viewBox/title_03.png" alt="" />
              </div>
              <div class="top-gress-percent">18% ↑</div>
              <div class="today-increase white">
                <span>今天</span>
                <span class="right-increase redColor">265,376</span>
              </div>
              <vue-slider
                v-model="valuetime"
                :railStyle="redColor"
                :processStyle="redProcessStyle"
              ></vue-slider>
              <div class="today-increase white">
                <span>昨天</span>
                <span class="right-increase greenColor">265,376</span>
              </div>
              <vue-slider
                v-model="valuetime"
                :railStyle="greenColor"
                :processStyle="greenProcessStyle"
              ></vue-slider>
            </div>
            <div class="r-t-b-left-box">
              <div class="tilte-compare-percent">
                <img src="~assets/img/viewBox/title_04.png" alt="" />
              </div>
              <div class="top-gress-percent">16% ↑</div>
              <div class="today-increase white">
                <span>今天</span>
                <span class="right-increase yellow">265,376</span>
              </div>
              <vue-slider
                v-model="valuetime"
                :railStyle="railStyle"
                :processStyle="processStyle"
              ></vue-slider>
              <div class="today-increase white">
                <span>昨天</span>
                <span class="right-increase purpleColor">265,376</span>
              </div>
              <vue-slider
                v-model="valuetime"
                :railStyle="purpleColor"
                :processStyle="purpleProcessStyle"
              ></vue-slider>
            </div>
          </div>
        </div>
      </div>
      <el-row :gutter="16" :margin="16">
        <el-col :span="7">
          <div class="grid-content">
            <img class="goal-slogan" src="~assets/img/viewBox/title_yellow.png" alt="" />
            <ul>
              <li v-for="(item, index) in tableData" :key="index" class="left-cell">
                <div class="left-cell">
                  {{ item.address }}
                </div>
              </li>
            </ul>
          </div></el-col
        >
        <el-col :span="17"
          ><div class="grid-content purpleColor">
            <img class="goal-slogan" src="~assets/img/viewBox/title_blue@2x.png" alt="" />
            <el-table
              :data="tableData2"
              stripe
              style="width: 100%; padding: 20px 40px 20px 40px; background: #0a173aff"
              :row-class-name="tableRowClassName"
              :header-cell-style="getRowClass"
              :cell-style="leftTableColor"
            >
              <el-table-column prop="date" width="180"> </el-table-column>
              <el-table-column prop="name" width="180"> </el-table-column>
              <el-table-column prop="address"> </el-table-column>
            </el-table></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      valuetime: 77,
      railStyle: {
        backgroundColor: "#FFCB1650",
      },
      leftTableColor({ row, column, rowIndex, columnIndex }) {
        //设置表格每行间隔颜色
        if (rowIndex % 2 === 0) {
          return "background:#0E1E47FF;border:none;color:#FFF;";
        }
        if (rowIndex % 2 === 1) {
          return "background:#0B1A40FF;border:none;color:#FFF;";
        }
      },
      purpleColor: {
        color: "#5147FF",
        backgroundColor: "#5147FF50",
      },
      redColor: {
        color: "#FB1E4F",
        backgroundColor: "#FB1E4F50",
      },
      greenColor: {
        color: "#44D7B6",
        backgroundColor: "#44D7B650",
      },
      processStyle: {
        backgroundColor: "#FFCB16",
      },
      purpleProcessStyle: {
        backgroundColor: "#5147FF",
      },
      redProcessStyle: {
        backgroundColor: "#FB1E4F",
      },
      greenProcessStyle: {
        backgroundColor: "#44D7B6",
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return "display:none";
      },

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableData2: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },

        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableData2: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
      ],

      gaugeData: [
        {
          value: 60,
          // name: "Commonly",
          title: {
            offsetCenter: ["0%", "0%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0", "0"],
          },
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option;

      option = {
        title: {
          text: "各事业部订单量占比",
          // subtext: "纯属虚构",
          y: "bottom",
          x: "9%",
          textStyle: {
            color: "#fff",
            fontSize: 8,
            align: "center",
          },
        },

        tooltip: {
          trigger: "item",
        },
        legend: {
          right: 10,
          bottom: 20,
          width: 174, //给整个图例组件这只宽度,如果不设置,图例将根据容器大小自适应
          icon: "rect",
          itemWidth: 8,
          itemHeight: 8,
          data: [
            "Search Engine",
            "Direct",
            "Email",
            "Union Ads",
            "Video Ads",
            "boxing",
            "margin",
            "padding",
            "volk",
          ],
          formatter: ["{a|{name}}"].join("\n"),
          textStyle: {
            rich: {
              a: {
                width: 40,
                fontSize: 8,
                lineHeight: 10,
                color: "#fff",
                height: 10,
              },
            },
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["33%", "67%"],
            center: ["0%", "50%"],
            top: 0,
            left: "19%",
            avoidLabelOverlap: false,

            itemStyle: {
              borderRadius: 0,
              borderColor: "#fff",
              borderWidth: 0,
            },
            label: {
              show: false,
              position: "center",
              color: "#fff",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
                positon: "right",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
              { value: 300, name: "boxing" },
              { value: 300, name: "margin" },
              { value: 300, name: "padding" },
              { value: 300, name: "volk" },
            ],
            hoverAnimation: true,
            selectedOffset: 100,
            // hoverOffset:100,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    drawGaugeRing() {
      var chartDom = document.getElementById("GaugeRing");
      var gaugeRing = this.$echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            backgroundColor: "red",
            radius: 40,

            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: "rgba(255, 231, 49, 1)",
              },
            },
            axisLine: {
              lineStyle: {
                color: [[1, "rgba(255, 231, 49, 0.3)"]],
                width: 8,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: this.gaugeData,
            title: {
              fontSize: 14,
            },
            center: ["50%", "50%"],
            detail: {
              width: 30,
              height: 30,
              fontSize: 14,
              backgroundColor: "yellow",
              borderColor: "auto",
              borderRadius: 15,
              borderWidth: 1,
              padding: 0,
            },
          },
        ],
      };
      gaugeRing.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
    this.drawGaugeRing();
  },
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
.name {
  width: 100px;
  height: 100px;
  background: #fff;
}
.home {
  background: #05092e;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei, sans-serif, Helvetica Neue, Helvetica,
    arial;
  min-height: 100vh;
  width: 100%;
  position: relative;
}
.container {
  min-height: 100vh;
  margin: 0 200px 0 200px;
  background: #05092eff;
}
.top-title-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.top-icon {
  padding: 27px 0;
  width: 240px;
}
.top-icon-content {
}
.top-container {
  display: flex;
  justify-content: space-between;
}
.left-box {
  background: #0a173a;
  border-radius: 8px;
  position: relative;
}
.order-count {
  color: #fb1e4f;
  padding-top: 10px;
  padding-left: 40px;
}
.count {
  height: 60px;
  font-size: 46px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #fb1e4f;
  line-height: 60px;
  padding-left: 0;
}
.unit {
  height: 21px;
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #fb1e4f;
  line-height: 21px;
}
.left-box-title {
  margin-left: 40px;
  width: 81px;
  height: 20px;
}
.left-box-title img {
  width: 100%;
  height: 100%;
}
.top-left-chart {
  width: 620px;
  height: 230px;
  background: #0e1e47;
  border-radius: 8px;
  margin-right: 40px;
  margin-left: 40px;
  margin-bottom: 20px;
  box-sizing: content-box;
}
.querry-icon {
  position: absolute;
  right: 28px;
  top: 28px;
}
.right-box {
  margin-top: -0.6875rem;
}
.right-top-box {
  width: 100%;
  height: 174px;
  border-radius: 8px;
  background: #0a173a;
  position: relative;
}
.right-box-title {
  margin-top: 20px;
}
.right-box-tab {
  width: 0.125rem;
  height: 0.6875rem;
  background: #ffcb16;
  display: inline-block;
}
.right-box-title-img {
  width: 6.0625rem;
  margin-left: 0.9375rem;
}
.yellow {
  color: #ffcb16;
}
.top-rigth-chart {
  position: absolute;
  right: 40px;
  top: 15px;
  width: 192px;
  height: 144px;
  background: #0e1e47;
}
.right-top-bottom-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}
.r-t-b-left-box {
  width: 380px;
  height: 165px;
  background: #0a173a;
  border-radius: 8px;
  padding: 20px 40px;
}
.tilte-compare-percent {
  width: 72px;
  height: 18px;
}
.tilte-compare-percent img {
  width: 100%;
  height: 100%;
  display: block;
}

.top-gress-percent {
  width: 100%;
  text-align: right;
  height: 14px;
  font-size: 10px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #fb1e4f;
  line-height: 14px;
}
.today-increase {
  height: 20px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  line-height: 20px;
}
.right-increase {
  float: right;
}
.yellow {
  color: yellow;
}
.white {
  color: white;
}

.purpleColor {
  color: #5147ff;
}
.redColor {
  color: #fb1e4f;
}
.greenColor {
  color: #44d7b6;
}
.grid-content {
  min-height: 36px;
  margin-bottom: 0;
  background: #0a173aff;
}
.el-row {
  margin-top: 20px;
  padding-bottom: 20px;
}
.goal-slogan {
  width: 100%;
  padding: 0;
}
.el-table .warning-row {
  background: #0e1e47;
}

.el-table .success-row {
  background: #0b1a40ff;
}
.left-cell:nth-child(odd) > .left-cell {
  margin: 0 20px;
  height: 40px;
  background: #0e1e47;
  color: #ffe69f;
  line-height: 40px;
  font-size: 15px;
  text-indent: 20px;
  letter-spacing: 1px;
}
.left-cell:nth-child(even) > .left-cell {
  margin: 0 20px;
  height: 40px;
  background: #0b1a40ff;
  color: #ffe69f;
  line-height: 40px;
  font-size: 15px;
  text-indent: 20px;
  letter-spacing: 1px;
}
.el-table::before {
  height: 0px;
}
</style>
